<div class="mat-elevation-z8">
  <table mat-table #table [dataSource]="dataSource" matSort>

    <!-- Note that these columns can be defined in any order.
           The actual rendered columns are set as a property on the row definition" -->

    <!-- RoleId Column -->
    <ng-container matColumnDef="roleId">
      <th mat-header-cell *matHeaderCellDef mat-sort-header >ID</th>
      <td mat-cell *matCellDef="let element" > {{element.roleId}} </td>
    </ng-container>

    <!-- RoleName Column -->
    <ng-container matColumnDef="roleName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 名稱 </th>
      <td mat-cell *matCellDef="let element"> {{element.roleName}} </td>
    </ng-container>

    <!-- SortNo Column -->
    <ng-container matColumnDef="sortNo">
      <th mat-header-cell *matHeaderCellDef mat-sort-header > 排序 </th>
      <td mat-cell *matCellDef="let element" > {{element.sortNo}} </td>
    </ng-container>

    <!-- AccessScope Column -->
    <ng-container matColumnDef="accessScope">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 存取 </th>
      <td mat-cell *matCellDef="let element"> {{element.accessScope}} </td>
    </ng-container>

    <!-- Description Column -->
    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 描述 </th>
      <td mat-cell *matCellDef="let element"> {{element.description}} </td>
    </ng-container>

    <!-- ParentRoleId Column -->
    <ng-container matColumnDef="parentRoleId">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 隸屬 </th>
      <td mat-cell *matCellDef="let element"> {{element.parentRoleId}} </td>
    </ng-container>

    <!-- RejectScope Column -->
    <ng-container matColumnDef="rejectScope">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 退回 </th>
      <td mat-cell *matCellDef="let element">
          <mat-checkbox [checked]="element.rejectScope" [disabled]="true">
            </mat-checkbox>
      </td>
    </ng-container>

    <!-- ApproveScope Column -->
    <ng-container matColumnDef="approveScope">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 核准 </th>
      <td mat-cell *matCellDef="let element"> 
          <mat-checkbox [checked]="element.approveScope" [disabled]="true">
            </mat-checkbox>
      </td>
    </ng-container>

    <!-- SubmitScope Column -->
    <ng-container matColumnDef="submitScope">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 送出 </th>
      <td mat-cell *matCellDef="let element"> 
        <mat-checkbox [checked]="element.submitScope" [disabled]="true">
        </mat-checkbox>
       </td>
    </ng-container>

    <!-- PassScope Column -->
    <ng-container matColumnDef="passScope">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 上陳 </th>
      <td mat-cell *matCellDef="let element">
        <mat-checkbox [checked]="element.passScope" [disabled]="true">
        </mat-checkbox>
      </td>
    </ng-container>

    <!-- PrintScope Column -->
    <ng-container matColumnDef="printScope">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> 影印 </th>
        <td mat-cell *matCellDef="let element">
          <mat-checkbox [checked]="element.printScope" [disabled]="true">
          </mat-checkbox>
        </td>
      </ng-container>

    <!-- actions -->
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef class="actions">
        <button mat-icon-button class="TableButton" (click)="openCreateDialog()">
          <mat-icon>add</mat-icon>
        </button>&nbsp;
        <button mat-icon-button class="TableButton" (click)="loadData()">
          <mat-icon>refresh</mat-icon>
        </button>
      </th>
      <td mat-cell *matCellDef="let row; let i=index;" class="actions">
        <button mat-icon-button class="TableButton" (click)="openUpdateDialog(row)">
          <mat-icon>edit</mat-icon>
        </button>&nbsp;
        <button mat-icon-button class="TableButton" (click)="openIMenuRoleDialog(row)">
          <mat-icon>subject</mat-icon>
        </button>&nbsp;
        <button mat-icon-button class="TableButton" (click)="openIActionRoleDialog(row)">
            <mat-icon>fingerprint</mat-icon>
          </button>&nbsp;
        <button mat-icon-button class="TableButton" (click)="openDeleteDialog(row)">
          <mat-icon>delete_forever</mat-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <div class="no-results" [style.display]="paginator.length == 0 ? '' : 'none'">
    No results
  </div>

  <mat-paginator #paginator showFirstLastButtons [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
  </mat-paginator>
</div>